import React, { useEffect, useState } from "react";
import {
  DownloadOutlined,
  FormOutlined,
  PhoneOutlined,
  AudioOutlined,
  FileDoneOutlined,
} from "@ant-design/icons";
import { Table, Button, Modal, Form, Input, Select, Popconfirm } from "antd";
import "./index.less";
import { useHistory } from "react-router-dom";
import callNet from "@/servers/callNet";
const OPTIONS_RECORDS = [
  {
    label: "线上会议",
    value: "1",
  },
  {
    label: "会议录音",
    value: "2",
  },
  {
    label: "录音文件",
    value: "3",
  },
];
export default function AiMeetingMinutes() {
  const history = useHistory();
  const [form] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [OPTIONS_TEMPLATE, setTemplateOptions] = useState(false);
  const [listData, setListData] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // history.push(`/main/createMeetingMinutes?meeting_id=${'123'}&customer=${'王二麻子'}&title=${'简简单单一个小会议'}&meeting_type=${3}`)
    getList();
    getTemplateOptions();
  }, []);

  const preview = (e, { meeting_id }) => {
    history.push(
      `/main/createMeetingMinutes?meeting_id=${meeting_id}&pageStatus=detail`
    );
  };

  const deleteRow = async ({ meeting_id }) => {
    const res = await callNet.delete(`/delete_meeting/${meeting_id}`);
    getList();
  };

  const renderActions = (e, record) => {
    return (
      <div className="table-actions">
        <a className="edit" onClick={() => preview(e, record)}>
          查看
        </a>
        <Popconfirm
          title="确实删除改行?"
          description="确实删除该行?"
          onConfirm={() => deleteRow(record)}
          okText="是"
          cancelText="否"
        >
          <a className="delete">删除</a>
        </Popconfirm>
      </div>
    );
  };

  const columns = [
    {
      title: "纪要标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "模板",
      dataIndex: "template_name",
      key: "template_name",
    },
    {
      title: "客户",
      dataIndex: "customer",
      key: "customer",
    },
    {
      title: "员工",
      dataIndex: "employee",
      key: "employee",
    },
    {
      title: "创建时间",
      dataIndex: "ctime",
      key: "ctime",
    },

    {
      title: "操作",
      dataIndex: "actions",
      key: "actions",
      render: renderActions,
    },
  ];

  const onCreateClick = () => {
    setIsModalOpen(true);
  };

  const onCreateMeetingMinutes = (flag) => {
    setIsModalOpen(false);
    history.push("/main/createMeetingMinutes");
  };

  const getTemplateOptions = async () => {
    const { templates } = await callNet.get("/templates");
    const options = templates.map((e) => ({
      label: e.template_name,
      value: e.template_id,
    }));
    setTemplateOptions(options);
  };

  const getList = async () => {
    try {
      setLoading(true);
      const { transcripts } = await callNet.get("/meeting_minutes");
      setListData(transcripts);
    } finally {
      setLoading(false);
    }
  };

  const submitCreate = async (values) => {
    try {
      const {
        template_id,
        customer,
        title,
        meeting_type,
        meetingNum,
        meetingPwd,
        meetingName,
      } = values;
      if (template_id) {
        const find = OPTIONS_TEMPLATE.find((e) => e.value === template_id);
        values.template_name = find.label;
      }
      setSubmitting(true);
      const { meeting_id } = await callNet.post("/meeting_minutes", values);
      let queryStr = `?meeting_id=${meeting_id}&customer=${customer}&title=${title}&template_id=${template_id}&meeting_type=${meeting_type}&pageStatus=edit`;
      if (meeting_type === "1") {
        queryStr += `&meetingNum=${meetingNum}&meetingPwd=${meetingPwd}&meetingName=${meetingName}`;
      }
      history.push(`/main/createMeetingMinutes${queryStr}`);
    } finally {
      setSubmitting(false);
    }
  };

  const setmeetingDefaultValue = (type) => {
    if (type === "1") {
      form.setFieldValue("meetingName", "赵小小");
    } else {
      form.setFieldValue("meetingName", "");
      form.setFieldValue("meetingNum", "");
      form.setFieldValue("meetingPwd", "");
    }
  };

  return (
    <>
      <div className="page-container">
        <div className="table-header">
          <h1>AI 电话纪要列表</h1>
          <div className="actions">
            <Button
              type="primary"
              icon={<FormOutlined />}
              size="middle"
              onClick={onCreateClick}
            >
              新建会议纪要
            </Button>
          </div>
        </div>
        <Table
          dataSource={listData}
          columns={columns}
          rowKey={(e) => e.meeting_id}
          loading={loading}
        />
      </div>

      <Modal
        title="创建会议纪要"
        open={isModalOpen}
        centered
        footer={null}
        onCancel={() => setIsModalOpen(false)}
      >
        <Form
          form={form}
          name="createForm"
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
          // style={{ maxWidth: 600 }}
          initialValues={{ employee: "赵小小" }}
          onFinish={submitCreate}
          autoComplete="off"
        >
          <Form.Item
            label="纪要标题"
            name="title"
            rules={[{ required: true, message: "请输入纪要标题" }]}
          >
            <Input placeholder="请输入纪要标题" />
          </Form.Item>

          <Form.Item
            label="模板"
            name="template_id"
            rules={[{ required: true, message: "请选择模板" }]}
          >
            <Select options={OPTIONS_TEMPLATE} placeholder="请选择模板" />
          </Form.Item>

          <Form.Item
            label="客户"
            name="customer"
            rules={[{ required: true, message: "请输入客户姓名" }]}
          >
            <Input placeholder="请输入客户姓名" />
          </Form.Item>
          <Form.Item
            label="员工"
            name="employee"
            rules={[{ required: true, message: "请填写员工姓名" }]}
          >
            <Input readOnly placeholder="请填写员工姓名" />
          </Form.Item>
          <Form.Item
            label="纪要方式"
            name="meeting_type"
            rules={[{ required: true, message: "请选择纪要方式" }]}
          >
            <Select options={OPTIONS_RECORDS} placeholder="请选择纪要方式" />
          </Form.Item>
          <Form.Item
            noStyle
            shouldUpdate={(prev, cur) => prev.meeting_type !== cur.meeting_type}
          >
            {({ getFieldValue }) => {
              const meeting_type = getFieldValue("meeting_type");
              setmeetingDefaultValue(meeting_type);
              if (meeting_type !== "1") return null;
              return (
                <>
                  <Form.Item
                    label="会议号"
                    name="meetingNum"
                    rules={[{ required: true, message: "请输入会议号" }]}
                  >
                    <Input placeholder="请输入会议号" />
                  </Form.Item>
                  <Form.Item label="会议密码" name="meetingPwd">
                    <Input placeholder="会议密码（无密码不填写）" />
                  </Form.Item>
                  <Form.Item
                    label="入会名称"
                    name="meetingName"
                    rules={[{ required: true, message: "请输入入会名称" }]}
                  >
                    <Input placeholder="" />
                  </Form.Item>
                </>
              );
            }}
          </Form.Item>

          <div className="actions_button">
            <Button type="primary" htmlType="submit" loading={submitting}>
              创建会议纪要
            </Button>
          </div>
        </Form>
        {/* <div className="choose_items">
                    <div className="choose-item" onClick={() => onCreateMeetingMinutes(1)}>
                        <PhoneOutlined size={30} />
                        <p>线上会议</p>
                    </div>
                    <div className="choose-item" onClick={() => onCreateMeetingMinutes(2)}>
                        <AudioOutlined />
                        <p>录音</p>
                    </div>
                    <div className="choose-item" onClick={() => onCreateMeetingMinutes(3)}>
                        <FileDoneOutlined />
                        <p>音频文件</p>
                    </div>
                </div> */}
      </Modal>
    </>
  );
}
